<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="未完成" name="1">
        <p
          v-for="(itme, index) in $store.state.affair"
          :key="index"
          v-show="itme.code == 0"
        >
          <input type="checkbox" @change="change(index)" />
          <span>{{ itme.name }}</span>
          <van-button type="default" @click="out(index)">取消</van-button>
        </p>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <p
          v-for="(itme, index) in $store.state.affair"
          :key="index"
          v-show="itme.code == 1"
        >
          <input type="checkbox" checked />
          <span>{{ itme.name }}</span>
          <span>{{ itme.cTime }}</span>
        </p>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3">
        <p
          v-for="(itme, index) in $store.state.affair"
          :key="index"
          v-show="itme.code == 2"
        >
         
          <s>{{ itme.name }}</s>
          <el-button type="primary" @click="recovery(index)" >恢复</el-button>
        </p>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
    };
  },
  methods: {
      change(index){
          this.$store.commit('change',index);
      },
      out(index){
            this.$store.commit('out',index);
      } ,
      recovery(index){
          this.$store.commit('recovery',index);
      }
  },
};
</script>

<style lang="scss" scoped>
p {
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
}
</style>